<div class="d-flex">
    <h4 *ngIf="displayTitle" class="mr-auto">Explore {{ elementCount | number }} Companies</h4>
    <sustainalytics-pagination #pagination *ngIf="elementCount > 0 && (paginationPositionDisplay == checkPagination.UpAndDown || paginationPositionDisplay == checkPagination.Up)"
        (changed)="pageChanged($event)" [elemCount]="elementCount" [stateChanged]="paginationStateChanged" class="ml-auto"></sustainalytics-pagination>
</div>

<div *ngIf="sourceTransformed" class="d-flex">
    <!-- FIXED -->
    <div *ngIf="fixedColumns && fixedColumns.length > 0" [ngClass]="{'col-md-12': !hasNonFixedCols, 'col-md-7': hasNonFixedCols}"s>
        <div class="d-flex align-items-end row flex-nowrap table-header-row col-md-12">
            <div *ngFor="let column of fixedColumns"
                [ngClass]="column.value.sizeClass"
                [ngStyle]="{'text-align': column.value.isCenterAligned ? 'center': 'unset'}">
                <column-header [options]="column.value" (onChanged)="doSomething($event)"></column-header>
            </div>
        </div>

        <div *ngFor="let item of sourceTransformed" class="cardStart card-body shadow mb-3" [ngStyle]="{'height': (rowHeight > 0 ? (rowHeight + 'px'): 'auto')}"
            style="flex-direction: unset!important;">
            <div *ngFor="let column of fixedColumns; let index = index;" [ngClass]="column.value.sizeClass" class="cellValue" [ngStyle]="{'text-align': column.value.isCenterAligned ? 'center': 'unset'}">
                <cell *ngIf="elementCount > 0" [options]="column.value" [key]="item[column.index]" (buttonClicked)="onButtonClicked($event)"></cell>
                <label *ngIf="elementCount == 0 && index == 0" style="margin: 0px">No available data</label>
            </div>
        </div>

    </div>
    <!-- NOT FIXED  -->
    <div *ngIf="dynamicColumns && dynamicColumns.length > 0" class="row col-md-5" style="overflow-x:auto;overflow-y:hidden;padding:0px;">
        <div style="white-space: nowrap">
            <div #dynamicColContainer class="table-header-row" style="display:flex">
                <div *ngFor="let column of dynamicColumns" class="flexibleHeader">
                    <column-header [options]="column.value" (onChanged)="doSomething($event)"></column-header>
                </div>
            </div>
            <div *ngFor="let item of sourceTransformed" class="cardEnd card-body shadow mb-3"  [ngStyle]="{'height': (rowHeight > 0 ? (rowHeight + 'px'): 'auto')}">
                <div *ngFor="let column of dynamicColumns" class="flexibleCell">
                    <cell *ngIf="elementCount > 0" [options]="column.value" [key]="item[column.index]" (buttonClicked)="onButtonClicked($event)" class="cellValue"></cell>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- PAGINATION -->
<div class="d-flex">
    <sustainalytics-pagination #pagination *ngIf="elementCount > 0 && showPagination && (paginationPositionDisplay == checkPagination.UpAndDown || paginationPositionDisplay == checkPagination.Down)"
        (changed)="pageChanged($event)" [elemCount]="elementCount" [stateChanged]="paginationStateChanged" class="ml-auto mt-3"></sustainalytics-pagination>
</div>